import React, { useState, useEffect } from "react";
import classes from './index.module.scss';
import { Lock_Btns, Lock_Map, columns } from '../contant';
import moment from 'moment';
import { Input, DatePicker, Select, Button, Table } from 'antd';
export const LockAdmin = (prop: any) => {
  const user = '管理员1';
  const [logs, setLogs] = useState([
    {
      key: '1',
      operator: user,
      operation: '修改配置',
      time: '2023-01-01 10:00:00',
      result: '成功'
    },
    {
      key: '2',
      operator: user,
      operation: '删除用户',
      time: '2023-01-01 11:00:00',
      result: '成功'
    },
    // ...更多日志
  ]);

  const handleClick = (item: any) => {
    setLogs([...logs, { key: `${logs.length + 1}`, operator: user, time: moment(new Date()).format('YYYY-MM-DD hh:mm:ss'), operation: `${item.name}`, result: item.click() }])
  }

  const exportToCSV = () => {
    let csvContent = "data:text/csv;charset=utf-8,";
    const headers = columns.map(column => column.title).join(',') + '\r\n';
    csvContent += headers;

    logs.forEach(logEntry => {exportToCSVcom
      const row = columns.map(column => logEntry[column.dataIndex]).join(',');
      csvContent += row + '\r\n';
    });

    const encodedUri = encodeURI(csvContent);
    const link = document.createElement('a');
    link.setAttribute('href', encodedUri);
    link.setAttribute('download', 'logs.csv');
    document.body.appendChild(link); // Required for FF

    link.click(); // This will download the CSV file
  };
  const BtnModule = (param: { item: any }) => {
    const { item } = param;
    return <Button className={classes['btn-com-collect']} type='primary' onClick={() => handleClick(item)}>
      {item.name}
    </Button>
  }
  return <div  className={classes['lock-container']}>

    <div className={classes.lockModule}>
      <div>
        蓝牙名称：<Input style={{ width: '100px' }} />
      </div>

      {
        Object.values(Lock_Map).slice(0, 4).map((item, index) => <BtnModule item={item} />)
      }
    </div>
    <div className={classes.lockModule}>
      <div>
        延时（秒）：<Input style={{ width: '100px' }} />
      </div>
      {
        Object.values(Lock_Map).slice(4, 7).map((item, index) => <BtnModule item={item} />)
      }
    </div>
    <div className={classes.lockModule}>
      {
        Object.values(Lock_Map).slice(7, 9).map((item, index) => <BtnModule item={item} />)
      }
    </div>
    <div className={classes.lockModule}>
      <span>
        时间：<DatePicker style={{ width: '100px' }} />
      </span>
      {
        Object.values(Lock_Map).slice(9, 11).map((item, index) => <BtnModule item={item} />)
      }
    </div>
    <div className={classes.lockModule}>
      <Select style={{ width: '100px' }} options={[{ key: '1', label: '锁芯Id1' }, { key: '2', label: '锁芯Id2' }]} />
      {
        Object.values(Lock_Map).slice(11, 13).map((item, index) => <BtnModule item={item} />)
      }
    </div>
    <div className={classes.lockModule}>
      <div>锁芯ID序号：12345678</div>
      {
        Object.values(Lock_Map).slice(13, 18).map((item, index) => <BtnModule item={item} />)
      }
    </div>
    <div className={classes.logModule}>
      {/* {lockId.map((str) => <div>{str}</div>)} */}
      <div>
        <Button onClick={exportToCSV} type="primary" style={{ marginBottom: 16 }}>
          导出到Excel
        </Button>
        <Table dataSource={logs} columns={columns} />
      </div>
    </div>
  </div>
}